<template>
  <!--分类浏览模块-->
  <div class="classification">
    <p class="title">分类浏览</p>
    <div>
      <div>
        <p class="type">[小说]</p>
        <table class="tbltype">
          <tr>
            <td><p>悬疑</p></td>
            <td><p>武侠</p></td>
            <td><p>青春</p></td>
            <td><p>言情</p></td>
          </tr>
          <tr>
            <td><p>官场</p></td>
            <td><p>历史</p></td>
            <td><p>财经</p></td>
            <td><p>军事</p></td>
          </tr>
          <tr>
            <td><p>作品集</p></td>
            <td colspan="2"><p>世界名著</p></td>
            <td><p>港台</p></td>
          </tr>
        </table>
      </div>
      <div>
        <p class="type">[文艺]</p>
        <table class="tbltype">
          <tr>
            <td><p>文学</p></td>
            <td><p>传记</p></td>
            <td><p>动漫</p></td>
            <td><p>艺术</p></td>
          </tr>
          <tr>
            <td><p>摄影</p></td>
            <td><p>设计</p></td>
          </tr>
        </table>
      </div>
      <div>
        <p class="type">[小说]</p>
        <table class="tbltype">
          <tr>
            <td><p>悬疑</p></td>
            <td><p>武侠</p></td>
            <td><p>青春</p></td>
            <td><p>言情</p></td>
          </tr>
          <tr>
            <td><p>官场</p></td>
            <td><p>历史</p></td>
            <td><p>财经</p></td>
            <td><p>军事</p></td>
          </tr>
          <tr>
            <td><p>作品集</p></td>
            <td colspan="2"><p>世界名著</p></td>
            <td><p>港台</p></td>
          </tr>
        </table>
      </div>
      <div>
        <p class="type">[生活]</p>
        <table class="tbltype">
          <tr>
            <td><p>美食</p></td>
            <td><p>旅游</p></td>
            <td><p>地图</p></td>
            <td><p>保健</p></td>
          </tr>
          <tr>
            <td><p>体育</p></td>
            <td><p>瑜伽</p></td>
            <td colspan="2"><p>美丽装扮</p></td>
          </tr>
          <tr>
            <td><p>装潢</p></td>
            <td><p>孕儿</p></td>
            <td colspan="2"><p>家庭教育</p></td>
          </tr>
          <tr>
            <td><p>两性</p></td>
            <td><p>炒股</p></td>
            <td colspan="2"><p>家居休闲</p></td>
          </tr>
          <tr>
            <td><p>宠物</p></td>
            <td><p>手工</p></td>
            <td colspan="2"><p>收藏鉴赏</p></td>
          </tr>
          <tr>
            <td><p>游戏</p></td>
            <td><p>占卜</p></td>
          </tr>
        </table>
      </div>
      <div>
        <p class="type">[人文社科]</p>
        <table class="tbltype">
          <tr>
            <td><p>文化</p></td>
            <td><p>历史</p></td>
            <td colspan="2"><p>哲学/宗教</p></td>
          </tr>
          <tr>
            <td><p>古籍</p></td>
            <td><p>政治</p></td>
            <td><p>军事</p></td>
            <td><p>法律</p></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Classification"
}
</script>

<style scoped>
.classification{
  margin-top: 5px;
  background-color: #f9f9f9;
  border: 1px solid lightgray;
  height: 648px;
}
.title{
  width: 232px;
  color: white;
  height: 30px;
  padding-left: 10px;
  margin-left: 1px;
  line-height: 30px;
  background-color: #77b1bd;
}
.type{
  color: coral;
  margin: 10px 12px 0 12px;
  font-weight: bold;
  font-size: 14px;
}
.tbltype{
  margin-left: 6px;
  border-bottom: 1px solid lightgray;
  padding-bottom: 12px;
}
.tbltype:nth-of-type(5){
  border: none;
}
.tbltype tr td{
  font-size: 14px;
  text-align: center;
  min-width: 54px;
  height: 22px;
}
.tbltype tr td p{
  color: #7a7a7a;
  border-right: 1px solid #e2e2e2;
  cursor: pointer;
}
.tbltype tr td p:hover{
  text-decoration: underline;
  color: #77b1bd;
}
</style>